<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="header flex justify-between">
      <view>全部数量: {{ total }}</view>
      <view class="flex justify-start">
        <view class="header-option">
          <image :src="baseImgUrl + '/manage/option.png'" mode=""></image>
        </view>
        <span class="header-span" @click="open">筛选</span>
        <view class="header-traingle">
          <image :src="baseImgUrl + '/manage/triangle.png'" mode=""></image>
        </view>
      </view>
    </view>
    <view class="listContainer">
      <view v-if="list.length > 0">
        <scroll-view-y @refresh="refresh()" @getMore="getMore()" :pageNo="searchObject.pageNo"
          :pageSize="searchObject.pageSize" :total="total">
          <template slot="scrollView_content">
            <view class="task_list">
              <view class="task_list-list" v-for="(item, index) in list" :key="index">
                <view @click="navTo(item, item.projectId)">
                  <view class="task_list-list-borders"></view>
                  <view class="task_list-list-top">
                    <view class="task_list-list-top-title">
                      {{ item.name }}
                    </view>
                    <view class="task_list-list-top-tip">
                      {{ item.createTime | formatTime }}
                    </view>
                  </view>

                  <view class="task_list-list-content">
                    <view class="task_list-list-content-left">
                      项目名称：{{ item.projectName }}
                    </view>
                  </view>

                  <view class="task_list-list-content">
                    <view class="task_list-list-content-left">
                      项目负责人是否确认：<span :class="item.isConfirmName == '是' ? 'text-green' : 'text-red'">{{
                        item.isConfirmName
                      }}</span>
                    </view>
                  </view>

                  <view class="task_list-list-content">
                    <view class="task_list-list-content-left">
                      项目状态：<span
                        :class="item.stateName == '待执业' ? 'text-red' : item.stateName == '执业中' ? 'text-blue' : 'text-green'">{{
                          item.stateName }}</span>
                    </view>
                  </view>

                  <view class="task_list-list-border"></view>

                  <view class="task_list-list-mark">
                    <view class="task_list-list-mark-left">
                      发布人：{{ item.createName ? item.createName : "" }}
                    </view>
                    <view class="task_list-list-mark-right">
                      <view>查看详情</view>
                      <view class="cuIcon-right"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无执业待办"></no-data>
    </view>

    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-list">
        <uni-section title="筛选" type="circle">
          <form>
            <!-- 项目负责人是否确认 -->
            <view class="formItem">
              <view class="label">项目负责人是否确认</view>
              <picker mode="selector" class="content" :range="stateType" range-key="text"
                @change="stateTypeChange($event)">
                <view style="color: grey">{{ searchObject.isConfirms || '请选择项目负责人是否确认' }}</view>
              </picker>
            </view>

            <!-- 项目名称 -->
            <view class="formItem">
              <view class="label">项目名称</view>
              <input class="content" type="text" v-model="searchObject.projectName" :placeholder="'请输入项目名称'" />
            </view>

            <!-- 执业名称 -->
            <view class="formItem">
              <view class="label">执业名称</view>
              <input class="content" type="text" v-model="searchObject.taskName" :placeholder="'请输入执业名称'" />
            </view>

          </form>
        </uni-section>
        <view class="popup-list-btn">
          <view class="btn" @click="close"> 重置 </view>
          <view class="btn" @click="sure"> 确定 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { baseImgUrl } from "@/config.js";
import scrollViewY from "@/components/scrollViewY/index";
export default {
  components: {
    scrollViewY,
  },
  filters: {
    formatTime(time) {
      const date = new Date(time);
      const year = date.getFullYear();    // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, '0');  // 获取月份（0-11，需要+1）
      const day = String(date.getDate()).padStart(2, '0');        // 获取日期
      return `${year}-${month}-${day}`;
    }
  },
  data() {
    return {
      baseImgUrl: baseImgUrl,
      navOptions: {
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "现场执业列表",
        }
      },
      list: [],
      total: 0,
      activeIndex: 1, // 默认选中未完成
      // 筛选的项目负责人是否确认
      stateType: [
        {
          value: "1",
          text: "是",
        },
        {
          value: "0",
          text: "否",
        },
      ],
      // 列表数据
      searchObject: {
        // 搜索条件
        pageNo: 1,
        pageSize: 10,
        system: "app",
        taskName: "", // 任务名称
        projectName: '', // 项目名称
        isConfirm: '', // 项目负责人是否确认(传值)
        isConfirms: '', // 项目负责人是否确认(展示)
      },
      dataStatus: "刷新", // 用于解决闪烁问题
      operation: null, // 上个页面传过来的字段，代表是可写还是只读(write1和write2皆为可修改状态，look只读状态)
      loading: false,
    };
  },
  provide() {
    return {
      getData: this.getList,
    };
  },
  onLoad(e) {
    this.operation = e.operation
  },
  onShow() {
    this.getList();
  },
  methods: {
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 上拉加载
    getMore() {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
    // 获取信息列表
    getList() {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      let data = {
        pageNo: this.searchObject.pageNo,
        pageSize: 10,
        system: "app",
        taskName: this.searchObject.taskName, // 任务名称
        projectName: this.searchObject.projectName, // 项目名称
        isConfirm: this.searchObject.isConfirm, // 项目负责人是否确认(传值)
      };
      if (this.operation == 'write1') {
        this.mergeRequest(data, 'getUnitList')
      } else if (this.operation == 'write2') {
        this.mergeRequest(data, 'getDoneTask')
      } else if (this.operation == 'write3') {
        data.isConfirm = 0
        this.mergeRequest(data, 'getUnConfirm')
      } else if (this.operation == 'look') {
        this.mergeRequest(data, 'getExpireTask')
      }
    },
    navTo(item, projectId) {
      this.$store.commit('save_task_name', item.name)
      uni.navigateTo({
        url: "../../pages_workTableChild/manage/InfoMation?taskId=" + item.taskId + '&projectId=' + projectId,
      });
    },
    resetSearch() {
      this.searchObject.pageNo = 1
      this.list = []
      this.getList()
    },
    open() {
      this.$refs.popup.open("top");
    },
    // 筛选的取消按钮
    close() {
      this.searchObject.pageNo = 1
      this.searchObject.taskName = ''
      this.searchObject.projectName = ''
      this.searchObject.isConfirm = ''
      this.searchObject.isConfirms = ''
    },
    // 筛选的确定按钮
    sure() {
      this.searchObject.pageNo = 1
      this.list = []
      this.getList().then((res) => {
        this.total = res.total;
        this.list = res.items;
        this.$refs.popup.close();
      });
    },
    // 项目负责人是否确认change
    stateTypeChange(e) {
      this.searchObject.isConfirm = this.stateType[e.detail.value].value;
      this.searchObject.isConfirms = this.stateType[e.detail.value].text;
    },

    // 合并请求函数
    mergeRequest(data, url) {
      return new Promise((resolve, reject) => {
        this.$store.dispatch(url, data).then((res) => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          this.loading = false
          uni.hideLoading();
        })
      });
    }
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/variables.scss";

.container_page {
  height: 100%;

  .header {
    padding: 20rpx;
    background-color: $OVERALL_SITUATION_BACKGROUND;

    &-option {
      width: 29rpx;
      height: 26rpx;
      margin-right: 9rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-span {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
    }

    &-traingle {
      margin-left: 14rpx;
      margin-top: -5rpx;
      width: 14rpx;
      height: 7rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .listContainer {
    min-height: calc(100vh - 160rpx);
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
  }
}

.task_list {
  width: 100%;
  min-height: calc(100vh - 160rpx);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;

  &-state {
    height: 80rpx;
    line-height: 80rpx;
    background-color: #e5ebf2;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;

    &-btn {
      width: 130rpx;
      font-size: 30rpx;
      color: #baacb8;
    }

    .active {
      color: #333333;
    }

    .active::before {
      content: "";
      border-left: 8rpx solid red;
      padding-left: 20rpx;
    }
  }

  &-list {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 702rpx;
    padding: 30rpx;
    background: #fff;
    margin: 10rpx auto;
    border-radius: 20rpx;
    position: relative;

    &-borders {
      width: 8rpx;
      height: 100rpx;
      background: $OVERALL_SITUATION_BACKGROUND;
      border-radius: 0 6rpx 8rpx 0;
      position: absolute;
      left: 0;
      top: 47rpx;
    }

    &-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-title {
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }

      &-tip {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #c1c1c1;
      }
    }

    &-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      height: 60rpx;

      &-left {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }
    }

    &-border {
      border-bottom: 1rpx solid #dddddd;
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }

    &-mark {
      display: flex;
      justify-content: space-between;
      flex-direction: row;

      &-left {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }

      &-right {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        line-height: 26rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #c1c1c1;
      }
    }
  }
}

::v-deep .uni-section-header {
  padding: 12rpx 20rpx 0 20rpx;
}

.popup-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 80rpx;
  padding: 20rpx;

  /deep/.uni-section {
    margin-top: 0;
  }

  .formItem {
    display: flex;
    align-items: center;
    height: 80rpx;

    .label {
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 36rpx;
      width: 40%;
    }

    .content {
      flex: 1;
      text-align: right;
      font-size: 28rpx
    }
  }

  &-btn {
    height: 80rpx;
    line-height: 80rpx;
    width: 100%;
    display: flex;

    .btn {
      flex: 1;
      text-align: center;
      border-radius: 20rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
    }

    .btn:nth-child(1) {
      background: $OVERALL_CLOSE_BUTTON_COLOR;
      color: $OVERALL_SITUATION_BACKGROUND;
    }

    .btn:nth-child(2) {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      color: #ffffff;
    }
  }
}

.task-add {
  width: 750rpx;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  z-index: 99;
  background: #eff1f7;

  &-btn {
    width: 702rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    line-height: 100rpx;
    background: #296ecf;
    color: #ffffff;
    font-size: 30rpx;
    text-align: center;
  }
}
</style>
